<template>
  <view class="gmat-page-item">
    <view class="gmat-page-item_info">
      <view class="avatar">
        <Images :src="avatar" width="58rpx" height="58rpx" errorImgType="person" />
      </view>
      <view class="name">{{ userName }}</view>
      <view class="position text-overflow-1">{{ companyPosition }}</view>
    </view>
    <view class="gmat-page-item_btn">
      <TButton
        v-if="approvalStatus === ApprovalStatusEnum.REJECT || !approvalStatus"
        text="报名"
        customClass="cardBtn br-50"
        :customStyle="{ ...customStyle, backgroundColor: '#ef823a' }"
        @click.stop="$emit('click')"
      />
      <TButton
        v-if="approvalStatus === ApprovalStatusEnum.PASSED"
        text="已报名"
        customClass="cardBtn br-50"
        :customStyle="{ ...customStyle, backgroundColor: '#4489ff' }"
      />
      <TButton
        v-if="approvalStatus === ApprovalStatusEnum.UNDERREVIEW"
        text="审核中"
        disabled
        customClass="cardBtn br-50"
        :customStyle="{ ...customStyle, backgroundColor: '#4489ff' }"
      />
      <TButton
        v-if="approvalStatus === ApprovalStatusEnum.NOTPASS"
        text="未通过"
        disabled
        customClass="cardBtn br-50"
        :customStyle="{ ...customStyle, backgroundColor: '#ff5151' }"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ApprovalStatusEnum } from '@/enums/activityStatusEnum';
  import { propTypes } from '@/utils/propTypes';
  import { type PropType } from 'vue';
  import Images from '@/components/TImage/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  defineProps({
    avatar: propTypes.string,
    userName: propTypes.string,
    companyPosition: propTypes.string,
    approvalStatus: Number as PropType<ApprovalStatusEnum>,
  });

  const customStyle = {
    width: '165rpx',
    height: '60rpx',
    lineHeight: '60rpx',
    color: '#fff',
  };

  const emit = defineEmits(['click'])

</script>

<style lang="scss" scoped>
  .gmat-page-item {
    height: 120rpx;
    background-color: #fff;
    position: relative;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;

    // &::before {
    //   content: '';
    //   width: calc(100% - 60rpx);
    //   height: 1px;
    //   background-color: #dddddd;
    //   position: absolute;
    //   left: 30rpx;
    //   bottom: 0;
    // }

    // &:nth-last-child(1) {
    //   &::before {
    //     display: none;
    //   }
    // }

    &_info {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #333;

      .avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 10rpx;
      }

      .name {
        min-width: 100rpx;
        max-width: 300rpx;
        margin-right: 20rpx;
      }
    }
  }
</style>
